<template>
    <div class="layouts">
        <Nav />
        <div class="layouts-content">
            <Aside :menuMap="menuMap" />
            <Main>
                <slot>
                    <router-view />
                </slot>
            </Main>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
// 组件组合
import Nav from './Nav.vue'
import Aside from './Aside.vue'
import Main from './Main.vue'

export default defineComponent({
    name: 'Layouts',
    components: {
        Nav,
        Aside,
        Main
    },
    props: {
        menuMap: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
        
        }
    },
    setup() {

    }
})
</script>

<style lang="scss">
.layouts {
    height: 100vh;
    overflow: hidden;
    &-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: calc(100vh - 4rem);

        .aside {
            flex: 1;
            height: 100%;
        }

        .main {
            flex: 4;
            height: 100%;
        }
    }
}
</style>